<template>
  <div class="box">
    <van-button class="btn btn1" @click="imageDel(false)" size="small" type="danger">删除</van-button>
    <van-button class="btn btn1" @click="imageDel(true)" size="small" type="danger">强制删除</van-button>
    <van-button class="btn" @click="toLink('/Image/ImagePull')" size="small" type="info">拉取镜像</van-button>
  </div>
</template>

<script>
import Vue from 'vue'
import { Button } from 'vant'

Vue.use(Button)
export default {
  props: ['checkItem'],
  methods: {
    // 跳转路由
    toLink (link) {
      this.$router.history.push(link)
    },
    // 删除镜像
    imageDel (isTrue) {
      // 检测是否有选中的容器
      if (this.checkItem.length === 0) {
        return this.$Toast('请选择镜像!')
      }
      for (var i = 0; i < this.checkItem.length; i++) {
        const parse = {
          data: {
            docker: `curl --unix-socket /var/run/docker.sock -s -X DELETE "http:/v1.40/images/${this.checkItem[i].Id}?force=${isTrue}"`
          }
        }
        this.$post(parse, res => {
          var data = JSON.parse(res)
          if (data.message) {
            return this.$Notify(data.message)
          }
          this.$Notify({ type: 'success', message: '删除成功！' })
          this.$emit('success')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  margin: vw(25) 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn{
  border-radius: vw(15);
}
.btn1{
  margin-right: vw(15);
}
</style>
